<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增商品类型')" />
	<th:block th:include="include :: bootstrap-select-css" />

	<style>

	</style>
</head>
<body class="white-bg">

	<div class="tabs-container">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">基本设置</a>
			</li>
			<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">扩展属性</a>
			</li>
			<li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">规格</a>
			</li>
		</ul>
		<div class="tab-content">
			<div id="tab-1" class="tab-pane active">
				<div class="panel-body">
					<form action="" class="form-horizontal" id="goodsTypeForm">
						<input id="typeId" name="typeId"  type="hidden">
						<div class="form-group">
							<label class="col-sm-3 control-label"><span style="color:red;">*</span>类型名称：</label>
							<div class="col-sm-8">
								<input id="name"  data-role="typeName"   class="form-control" type="text" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">实体商品：</label>
							<div class="col-sm-8">
								<select name="physical"  data-role="physical">
									<option value="0">是</option>
									<option value="1">否</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label">关联品牌：</label>
							<div class="col-sm-8">
								<select id="brandSelect" data-role="brandSelect" data-size="12"
										class="form-control noselect2 selectpicker" data-none-selected-text="请选择品牌"
										data-live-search="true" multiple>
								</select>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div id="tab-2" class="tab-pane">
				<div class="panel-body">
					<div class="form-group">
						<label class="col-sm-2 control-label"></label>
						<div class="col-sm-12">
							<table class="table table-bordered" data-mobile-responsive="true" data-role="extend">
								<thead>
								<tr>
									<th>
										属性名
									</th>
									<th>
										前台列表页表现类型
									</th>
									<th>
										选择项可选值
									</th>
									<th>
										删除
									</th>
								</tr>
								</thead>
								<tbody data-role="extend">
								</tbody>
								<tfoot>
								<tr>
									<td colspan="4">
										<div class="btn-group-sm" data-role="add-group" style="text-align: center;">
											<a class="btn btn-success">
												<i class="fa fa-plus"></i> 添加扩展属性
											</a>
										</div>
									</td>
								</tr>

								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div id="tab-3" class="tab-pane">
				<div class="panel-body">
					<div class="form-group">
						<label class="font-noraml">关联商品规格</label>
						<select id="goodsTypeSelect" data-role="goodsTypeSelect" data-size="12"
								class="form-control noselect2 selectpicker" data-none-selected-text="请选择规格"
								data-live-search="true" multiple>
							<!--<option value="1"  data-subtext="黑椒味、原味、碳烧味、综合味">口味</option>-->
							<!--<option value="PHP">PHP</option>-->
							<!--<option value=".NET">.NET</option>-->
						</select>
					</div>
				</div>
			</div>

		</div>


	</div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: bootstrap-select-js"/>
    <script type="text/javascript">

		$(function() {
			// 删除逻辑
			$(document).on('click', '[data-role="trDel"]', function() {
				$(this).closest('tr').remove();
			})

			// 上下移动
			$(document).on('click', '[data-role="trUp"]', function() {
				var _this = $(this).closest('tr');
				if(_this.prev()) {
					_this.prev().before(_this);
				}

			})
			$(document).on('click', '[data-role="trDown"]', function() {
				var _this = $(this).closest('tr');
				if(_this.next()) {
					_this.next().after(_this);
				}
			})

			$('[data-role="add-group"]').on('click',function () {
				var html = '<tr>\
                        <td>\
                            <input type="text"  value="">\
                        </td>\
                        <td>\
							<select class="" name="type"  data-role="extendStyle">\
								<option value="select_nav">选择项-渐进式筛选</option>\
								<option value="input_disabled">输入项-不可搜索</option>\
							</select>\
                        </td>\
						<td>\
							<input type="text" value="">\
						</td>\
                        <td style="width:160px">\
							<button class="btn " type="button" data-role="trUp" >\
							<i class="glyphicon glyphicon-arrow-up" style="color: #1ab394;"></i>\
							</button>\
							<button class="btn" type="button" data-role="trDown">\
							<i class="glyphicon glyphicon-arrow-down" style="color: #1ab394;"></i>\
							</button>\
							<button class="btn" type="button" data-role="trDel" >\
							<i class="glyphicon glyphicon glyphicon-trash" style="color: #d9534f;"></i>\
							</button>\
						</td>\
                    </tr>';
				$('[data-role="extend"] tbody').append(html);
			});


		});


		var prefix = ctx + "goods/goodsType";

		$("#form-goodsType-add").validate();

		function submitHandler() {
			if ($.validate.form()) {

				//类型基本信息
				var typeName = $.trim($('[data-role="typeName"]').val());

				if(typeName == ''){
					$.modal.alertWarning("类型名称不能为空！");
					return;
				}

				var physical = $('[data-role="physical"]').val()
				var brandIds = $('[data-role="brandSelect"]').val();




				//扩展属性
				var typePropsJson = [];
				var apecTr = $('[data-role="extend"] tbody tr');
				for(var i = 0,len = apecTr.length;i < len;i++) {
					var obj = {};
					obj.name = apecTr.eq(i).find('input').eq(0).val();
					obj.typePropValues = apecTr.eq(i).find('input').eq(1).val();
					obj.type = apecTr.eq(i).find('select').eq(0).val();
					obj.orderNum = i;
					typePropsJson.push(obj);
					// console.log(obj)
				}
				//关联规格
				var specIds = $('[data-role="goodsTypeSelect"]').val();

				// console.log(specIds,specIds1);

				var data = {
					name: typeName,
					physical:physical,
					brandIds:brandIds,
					typePropsJson: JSON.stringify(typePropsJson),
					specIds:specIds
				};
				$.operate.save(prefix + "/add", data);
			}
		}


		$(function () {

			$('[data-role="brandSelect"]').empty('');
			$.ajax({
				url: ctx + "goods/brand/brandList",
				type: 'POST',
				data: {
				},
				success: function (result) {
					if(result != null) {
						$.each(result,function(index, item) {
							$('[data-role="brandSelect"]').append('<option value="'+ item.brandId +'">'+item.brandName+'</option>');
						});
						$('[data-role="brandSelect"]').selectpicker("refresh");
					}
				}
			});




			$('[data-role="goodsTypeSelect"]').empty('');
			$.ajax({
				url: ctx + "goods/specification/getSpecList",
				type: 'POST',
				data: {
				},
				success: function (result) {
					if(result != null) {
						// console.log(result)
						$.each(result,function(index, item) {
							$('[data-role="goodsTypeSelect"]').append('<option value="'+ item.specId +'" data-subtext="'+item.specValues+'">'+item.specName+'</option>');
						});
						$('[data-role="goodsTypeSelect"]').selectpicker("refresh");
					}
				}
			});
		});


	</script>
</body>
</html>
